<template>
  <view class="page-container">
    <!-- 左侧分类栏 -->
    <view class="category-container">
      <scroll-view scroll-y class="category-scroll">
        <view
            v-for="(item, index) in categories"
            :key="index"
            :class="['category-item', { active: currentCategory === index }]"
            @tap="handleCategoryClick(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
    </view>

    <!-- 右侧商品列表 -->
    <view class="product-container">
      <scroll-view scroll-y class="product-scroll">
        <view class="product-list">
          <view
              v-for="(item, index) in currentProducts"
              :key="index"
              class="product-card"
              @tap="handleProductClick(item)"
          >
            <image :src="getImage(item.images)" mode="aspectFill" class="product-image"/>
            <view class="product-info">
              <view class="product-name">{{ item.name }}</view>
              <view class="product-desc">{{ item.description }}</view>
              <view class="product-bottom">
                <view class="product-price">
                  <text class="price-symbol">¥</text>
                  <text class="price-value">{{ item.price }}</text>
                </view>
                <uni-icons
                    type="plus-filled"
                    size="24"
                    color="#FF6B35"
                    @click.stop="handleAddToCart(item)"
                />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view
          v-for="(tab, index) in tabList"
          :key="index"
          class="tab-item"
          @tap="handleTabClick(index)"
      >
        <uni-icons
            :type="currentTab === index ? tab.activeIcon : tab.icon"
            size="24"
            :color="currentTab === index ? '#FF6B35' : '#999'"
        />
        <text :class="['tab-text', { active: currentTab === index }]">{{ tab.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      currentTab: 1, // 默认选中分类tab
      categories: [],
      tabList: [
        { name: '首页', icon: 'home', activeIcon: 'home-filled', url: '/pages/index/index' },
        { name: '分类', icon: 'grid', activeIcon: 'grid-filled', url: '/pages/category/index' },
        { name: '购物车', icon: 'cart', activeIcon: 'cart-filled', url: '/pages/cart/index' }
      ]
    }
  },
  computed: {
    currentProducts() {
      if (!this.categories.length) return []
      const category = this.categories[this.currentCategory]
      return category?.children || []
    }
  },
  onShow() {
    // 加载分类列表
    this.loadCategories()
  },
  methods: {
    getImage(images) {
      if (!images) return ''
      return  images.split(',')[0]
    },
    async loadCategories() {
      try {
        const res = await this.$api.getCategoryList()
        if (res && res.length > 0) {
          this.categories = res
        }
      } catch (error) {
        console.error('Failed to load categories:', error)
        uni.showToast({
          title: '加载分类失败',
          icon: 'none'
        })
      }
    },
    handleCategoryClick(index) {
      if (this.currentCategory === index) return
      this.currentCategory = index
    },
    handleTabClick(index) {
      const tab = this.tabList[index]
      if (tab.url) {
        uni.switchTab({
          url: tab.url
        })
      }
    },
    handleProductClick(item) {
      // 跳转到商品详情页
      uni.navigateTo({
        url: `/pages/product/detail?id=${item.id}`
      })
    },
    handleAddToCart(item) {
      // 添加购物车逻辑
      uni.showToast({
        title: '已添加到购物车',
        icon: 'success'
      })
    }
  }
}
</script>

<style>
page {
  height: 100vh;
}

.page-container {
  display: flex;
  height: 100vh;
  background-color: #F8F4E9;
  padding-bottom: 100rpx; /* 为底部导航栏留出空间 */
}

.category-container {
  width: 180rpx;
  height: 100%;
  background-color: #F5EFE0;
  flex-shrink: 0;
  position: relative;
}

.category-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.product-container {
  flex: 1;
  height: 100%;
  background-color: #FFFFFF;
  position: relative;
}

.product-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.product-list {
  padding: 20rpx;
}

.product-card {
  margin-bottom: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 300rpx;
}

.product-info {
  padding: 20rpx;
}

.product-name {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.product-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 16rpx;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 12px;
  color: #FF6B35;
}

.price-value {
  font-size: 18px;
  color: #FF6B35;
  font-weight: bold;
  margin-left: 2rpx;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-text {
  font-size: 12px;
  color: #999;
  margin-top: 4rpx;
}

.tab-text.active {
  color: #FF6B35;
}

.category-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #EEE7D5;
}

.category-item.active {
  color: #FF6B35;
  background-color: #FFFFFF;
  font-weight: bold;
}
</style>
